<template>
  <div>
    <el-alert
      title="注意: 只允许为第三级分类设置相关参数!"
      :closable="false"
      type="warning"
      show-icon
    >
    </el-alert>
    <div>
      <span>选择商品分类：</span>
      <el-cascader
        v-model="value1"
        :options="cateList"
        :props="cateProps"
        @change="handleChange"
        placeholder="请选择"
      />
    </div>
    <!-- table切换 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="first">
        <el-button type="primary">添加参数</el-button>
        <el-table :data="tableData" :border="parentBorder" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <p m="t-0 b-2">State: {{ props.row.state }}</p>
                <p m="t-0 b-2">City: {{ props.row.city }}</p>
                <p m="t-0 b-2">Address: {{ props.row.address }}</p>
                <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
                <h3>Family</h3>
                <el-table :data="props.row.family" :border="childBorder">
                  <el-table-column label="Name" prop="name" />
                  <el-table-column label="State" prop="state" />
                  <el-table-column label="City" prop="city" />
                  <el-table-column label="Address" prop="address" />
                  <el-table-column label="Zip" prop="zip" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="参数名称" prop="date" />
          <el-table-column label="" prop="name" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="second">
        <el-button type="primary">添加属性</el-button>
        <el-table :data="tableData" :border="parentBorder" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <p m="t-0 b-2">State: {{ props.row.state }}</p>
                <p m="t-0 b-2">City: {{ props.row.city }}</p>
                <p m="t-0 b-2">Address: {{ props.row.address }}</p>
                <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
                <h3>Family</h3>
                <el-table :data="props.row.family" :border="childBorder">
                  <el-table-column label="Name" prop="name" />
                  <el-table-column label="State" prop="state" />
                  <el-table-column label="City" prop="city" />
                  <el-table-column label="Address" prop="address" />
                  <el-table-column label="Zip" prop="zip" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="属性名称" prop="date" />
          <el-table-column label="" prop="name" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { categoriesList, categoriesLists } from "../tools/ajax";

const value1 = ref([]);
const activeName = ref("first");

const cateProps = {
  //展示分类数据的配置选项
  expandTrigger: "hover",
  label: "cat_name",
  value: "cat_id",
  children: "children",
};
const cateList = reactive([]);

function handleChange(value) {
  console.log(value1);
  console.log(value);
  if (!value[2]) {
    value1.__v_isRef = false;
  }
}
categoriesLists({ id: "6", sel: "many", }).then((res) => {
  console.log(res);
});

categoriesList().then((res) => {
  // console.log(res);
  cateList.push(...res.data);
});
</script>
<style scoped lang="less">
</style>